<template>
  <div>
    <div class="container">
      <h2 class="title" :style="{
        fontSize: props.titleSize + 'px',
        color: props.titleColor
      }">
        <span class="mr-10">
          {{ props.serialNum }}.
        </span>
        <span :class="{'font-bold': !props.titleBold, 'font-italic': !props.titleItalic}">
          {{ props.title }}
        </span>
      </h2>
      <div class="desc" :class="{ 'font-bold': !props.descWeight, 'font-italic': !props.descItalic }" :style="{
        fontSize: props.descSize + 'px',
        color: props.descColor
      }">
        {{ props.desc }}
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  serialNum:{
    type: Number,
    required: true
  },
  title:{
    type: String,
    default: ''
  },
  desc:{
    type: String,
    default: ''
  },
  titleSize:{
    type: String,
    default: '22px'
  },
  descSize:{
    type: String,
    default: '16px'
  },
  titleWeight:{
    type: Number,
    default: 0
  },
  descWeight:{
    type: Number,
    default: 0
  },
  titleItalic:{
    type: Number,
    default: 0
  },
  descItalic:{
    type: Number,
    default: 0
  },
  titleColor:{
    type: String,
    default: ''
  },
  descColor:{
    type: String,
    default: ''
  }
})


</script>
<style scoped lang="scss">
.container {
  > h2{
    font-size: 20px;
    > span{
      margin: 0 15px;
    }
  }
}

.desc{
  font-size: var(--font-size-base);
  color: var(--font-color-light);
  text-indent: 5px; /* 将文本首行向右缩进5像素 */
}

</style>